এক্সএইচটিএমএল (XHTML) ডকুমেন্টে CSS (Cascading Style Sheets) ব্যবহার করার জন্য <style> ট্যাগ ব্যবহার করা হয়। <style> ট্যাগের মাধ্যমে আপনি ডকুমেন্টের মধ্যে স্টাইলশীট অন্তর্ভুক্ত করতে পারেন, যা HTML উপাদানগুলোর প্রদর্শন কিভাবে হবে তা নির্ধারণ করে।
এক্সএইচটিএমএল ডকুমেন্টে স্টাইলশীট ইনক্লুড করার দুটি পদ্ধতি রয়েছে: ইন্টারনাল এবং এক্সটার্নাল। এখানে আমরা ইন্টারনাল স্টাইলশীট সম্পর্কে আলোচনা করব, যেখানে CSS কোড সরাসরি HTML ডকুমেন্টের <head> সেকশনে <style> ট্যাগের মধ্যে লেখা হয়।
১. <style> ট্যাগের ব্যবহার
XHTML ডকুমেন্টে স্টাইলশীট যোগ করার জন্য <style> ট্যাগটি <head> সেকশনে ব্যবহার করা হয়। <style> ট্যাগের মধ্যে আপনি CSS কোড লিখতে পারেন যা ডকুমেন্টের বিভিন্ন উপাদানকে স্টাইল করতে সহায়ক।
সাধারণ গঠন:
<head>
<style type="text/css">
/* CSS কোড এখানে লেখা হবে */
</style>
</head>
২. type অ্যাট্রিবিউট
XHTML-এ <style> ট্যাগের মধ্যে type অ্যাট্রিবিউট ব্যবহার করা উচিত, যাতে ব্রাউজার জানে এটি একটি CSS স্টাইলশীট। type="text/css" হল স্ট্যান্ডার্ড উপায়। এটি নিশ্চিত করে যে স্টাইলশীটটি CSS হিসেবে পরিচিত হবে।
উদাহরণ:
<head>
<style type="text/css">
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
</style>
</head>
৩. ইন্টারনাল স্টাইলশীট উদাহরণ
XHTML ডকুমেন্টে ইন্টারনাল স্টাইলশীট ব্যবহার করার জন্য <style> ট্যাগের মধ্যে CSS কোড লিখতে হয়। নিচে একটি পূর্ণাঙ্গ উদাহরণ দেওয়া হলো, যেখানে স্টাইলশীটটি <head> সেকশনে অন্তর্ভুক্ত করা হয়েছে এবং ডকুমেন্টের কিছু HTML উপাদানকে স্টাইল করা হয়েছে।
উদাহরণ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML Internal Stylesheet Example</title>
<style type="text/css">
body {
background-color: #e0f7fa;
font-family: 'Arial', sans-serif;
}
h1 {
color: #00796b;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
.highlight {
background-color: #ffeb3b;
color: #d32f2f;
}
</style>
</head>
<body>
<h1>Welcome to XHTML</h1>
<p>This is an example of an XHTML document with an internal stylesheet.</p>
<p class="highlight">This text is highlighted with custom styling.</p>
</body>
</html>
৪. স্টাইলশীট এবং এক্সএইচটিএমএল-এর নিয়মাবলী
৪.1 ট্যাগ এবং অ্যাট্রিবিউটের কেস সেনসিটিভিটি
XHTML-এ সব ট্যাগ এবং অ্যাট্রিবিউট নাম ছোট হাতের অক্ষরে থাকতে হবে। <style> ট্যাগের ক্ষেত্রেও একই নিয়ম প্রযোজ্য।
সঠিক:
<style type="text/css">
body {
background-color: #f0f0f0;
}
</style>
ভুল:
<STYLE TYPE="text/css">
BODY {
BACKGROUND-COLOR: #f0f0f0;
}
</STYLE>
৫. type অ্যাট্রিবিউট এর প্রয়োজনীয়তা
XHTML-এ type অ্যাট্রিবিউট অবশ্যই ব্যবহার করতে হবে। এটি স্টাইলশীটের প্রকার জানায় এবং ব্রাউজারকে সঠিকভাবে CSS প্রক্রিয়া করতে সহায়তা করে। XHTML-এ type অ্যাট্রিবিউটটি text/css হিসেবে নির্ধারণ করা উচিত।
সঠিক:
<style type="text/css">
h1 {
color: #0000ff;
}
</style>
ভুল:
<style>
h1 {
color: #0000ff;
}
</style>
XHTML ডকুমেন্টে ইন্টারনাল স্টাইলশীট ব্যবহারের জন্য <style> ট্যাগ ব্যবহার করা হয়, যা <head> সেকশনে রাখা হয়। স্টাইলশীট সঠিকভাবে লেখার জন্য type="text/css" অ্যাট্রিবিউট ব্যবহার করা আবশ্যক, যা ব্রাউজারকে CSS প্রক্রিয়াকরণ করতে সহায়তা করে। XHTML-এ স্টাইলশীট ব্যবহারের সময় কেস সেনসিটিভিটি এবং সঠিক ট্যাগ বন্ধন নিশ্চিত করতে হবে।
Read more
